<!-- ------------------------------------- 基本布局  ------------------------------------- -->
<ul class="nav nav-list accordion-group">
  <li class="nav-header">
    <div class="pull-right popover-info"><i class="icon-question-sign "></i>
      <div class="popover fade right">
        <div class="arrow"></div>
        <h3 class="popover-title">功能</h3>
        <div class="popover-content">在这里设置你的栅格布局, 栅格总数默认为12, 用空格分割每列的栅格值, 如果您需要了解更多信息，请访问<a target="_blank" href="http://twitter.github.io/bootstrap/scaffolding.html#gridSystem">Bootstrap栅格系统.</a></div>
      </div>
    </div>
    <i class="icon-plus icon-white"></i> 布局设置 </li>
  <li style="display: list-item;" class="rows" id="estRows">
    <div class="lyrow ui-draggable"> 
      <a href="#close" class="remove label label-important">
        <i class="icon-remove icon-white"></i>删除
      </a> 
      <span class="drag label">
        <i class="icon-move"></i>拖动
      </span>
      <div class="preview">
        <input value="12" type="text">
      </div>
      <div class="view">
        <div class="row-fluid clearfix">
          <div class="span12 column"></div>
        </div>
      </div>
    </div>
    <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <div class="preview">
        <input value="6 6" type="text">
      </div>
      <div class="view">
        <div class="row-fluid clearfix">
          <div class="span6 column"></div>
          <div class="span6 column"></div>
        </div>
      </div>
    </div>
    <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <div class="preview">
        <input value="8 4" type="text">
      </div>
      <div class="view">
        <div class="row-fluid clearfix">
          <div class="span8 column"></div>
          <div class="span4 column"></div>
        </div>
      </div>
    </div>
    <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <div class="preview">
        <input value="4 4 4" type="text">
      </div>
      <div class="view">
        <div class="row-fluid clearfix">
          <div class="span4 column"></div>
          <div class="span4 column"></div>
          <div class="span4 column"></div>
        </div>
      </div>
    </div>
    <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <div class="preview">
        <input value="2 6 4" type="text">
      </div>
      <div class="view">
        <div class="row-fluid clearfix">
          <div class="span2 column"></div>
          <div class="span6 column"></div>
          <div class="span4 column"></div>
        </div>
      </div>
    </div>
  </li>
</ul>
<!-- ------------------------------------- 基本CSS ------------------------------------- -->
<#-- "基本CSS" 的组名为 group1 -->
<#assign groupname="group1" />
<#if groupboxes[groupname]?exists && groupboxes[groupname]?size&gt;0 >
<ul class="nav nav-list accordion-group">
  <li class="nav-header"><i class="icon-plus icon-white"></i> 基本CSS
    <div class="pull-right popover-info"><i class="icon-question-sign "></i>
      <div class="popover fade right">
        <div class="arrow"></div>
        <h3 class="popover-title">帮助</h3>
        <div class="popover-content">这里提供了一系列基本元素样式，你可以通过区块右上角的编辑按钮修改样式设置。如需了解更多信息，请访问<a target="_blank" href="http://twitter.github.io/bootstrap/base-css.html">基本CSS.</a></div>
      </div>
    </div>
  </li>
  <li style="display: none;" class="boxes" id="elmBase">
    <#list groupboxes[groupname] as box>
      <div class="box box-element ui-draggable"> 
    	<a href="#close" class="remove label label-important">
    	  <i class="icon-remove icon-white"></i>删除
    	</a>
    	<span class="drag label">
    	  <i class="icon-move"></i>拖动
    	</span> 
        <span class="configuration">
          <#list box.config_html_list as box_config>
          	${box_config}
          </#list>
        </span>
        <div class="preview">
          ${box.preview}
        </div>
        <#if box.view_html?exists>
             ${box.view_html}
        <#else>
             <div class="view"> 
			      <h3 contenteditable="true">${box.preview}获取View失败.</h3> 
			  </div>
        </#if>
      </div>
    </#list>
  </li>
</ul>
</#if>
    <!-- ------------------------------------- 组件 ------------------------------------- -->
<ul class="nav nav-list accordion-group">
  <li class="nav-header"><i class="icon-plus icon-white"></i> 组件
    <div class="pull-right popover-info"><i class="icon-question-sign "></i>
      <div class="popover fade right">
        <div class="arrow"></div>
        <h3 class="popover-title">帮助</h3>
        <div class="popover-content">拖放组件到布局框内. 拖入后你可以设置组件样式. 查看这里获取更多帮助 <a target="_blank" href="http://twitter.github.io/bootstrap/components.html">Components.</a></div>
      </div>
    </div>
  </li>
  <li style="display: none;" class="boxes" id="elmComponents">
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">方向<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="active"><a href="#" rel="">横向</a></li>
        <li class=""><a href="#" rel="btn-group-vertical">竖向</a></li>
      </ul>
      </span> </span>
      <div class="preview">按钮组</div>
      <div class="view">
        <div class="btn-group">
          <button class="btn" type="button"><i class="icon-align-left"></i></button>
          <button class="btn" type="button"><i class="icon-align-center"></i></button>
          <button class="btn" type="button"><i class="icon-align-right"></i></button>
          <button class="btn" type="button"><i class="icon-align-justify"></i></button>
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a class="btn btn-mini" href="#" rel="dropup">上拉</a> </span>
      <div class="preview">下拉菜单</div>
      <div class="view">
        <div class="btn-group">
          <button class="btn" contenteditable="true">Action</button>
          <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
          <ul class="dropdown-menu" contenteditable="true">
            <li><a href="#">操作</a></li>
            <li><a href="#">设置栏目</a></li>
            <li><a href="#">更多设置</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu"> <a tabindex="-1" href="#">更多选项</a>
              <ul class="dropdown-menu">
                <li><a href="#">操作</a></li>
                <li><a href="#">设置栏目</a></li>
                <li><a href="#">更多设置</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class=""><a href="#" rel="nav-tabs">线框</a></li>
        <li class=""><a href="#" rel="nav-pills">图钉</a></li>
      </ul>
      </span> <a class="btn btn-mini" href="#" rel="nav-stacked">切换格式</a> </span>
      <div class="preview">导航</div>
      <div class="view">
        <ul class="nav nav-tabs" contenteditable="true">
          <li class="active"><a href="#">首页</a></li>
          <li><a href="#">资料</a></li>
          <li class="disabled"><a href="#">信息</a></li>
          <li class="dropdown pull-right"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">操作</a></li>
              <li><a href="#">设置栏目</a></li>
              <li><a href="#">更多设置</a></li>
              <li class="divider"></li>
              <li><a href="#">分割线</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a class="btn btn-mini" href="#" rel="well">嵌入</a> </span>
      <div class="preview">导航列表</div>
      <div class="view">
        <ul class="nav nav-list" contenteditable="true">
          <li class="nav-header">列表标题</li>
          <li class="active"><a href="#">首页</a></li>
          <li><a href="#">库</a></li>
          <li><a href="#">应用</a></li>
          <li class="nav-header">功能列表</li>
          <li><a href="#">资料</a></li>
          <li><a href="#">设置</a></li>
          <li class="divider"></li>
          <li><a href="#">帮助</a></li>
        </ul>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
      <div class="preview">面包导航</div>
      <div class="view">
        <ul class="breadcrumb" contenteditable="true">
          <li><a href="#">主页</a> <span class="divider">/</span></li>
          <li><a href="#">类目</a> <span class="divider">/</span></li>
          <li class="active">主题</li>
        </ul>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">尺寸 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class=""><a href="#" rel="pagination-large">大</a></li>
        <li class="active"><a href="#" rel="">中</a></li>
        <li class=""><a href="#" rel="pagination-small">小</a></li>
        <li class=""><a href="#" rel="pagination-mini">微型</a></li>
      </ul>
      </span> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">位置 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="active"><a href="#" rel="">靠左</a></li>
        <li class=""><a href="#" rel="pagination-centered">居中</a></li>
        <li class=""><a href="#" rel="pagination-right">靠右</a></li>
      </ul>
      </span> </span>
      <div class="preview">翻页</div>
      <div class="view">
        <div class="pagination">
          <ul contenteditable="true">
            <li><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">下一页</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="active"><a href="#" rel="">默认</a></li>
        <li class=""><a href="#" rel="badge-success">成功</a></li>
        <li class=""><a href="#" rel="badge-warning">警告</a></li>
        <li class=""><a href="#" rel="badge-important">重要</a></li>
        <li class=""><a href="#" rel="badge-info">提示</a></li>
        <li class=""><a href="#" rel="badge-inverse">倒数</a></li>
      </ul>
      </span> </span>
      <div class="preview">文字标签</div>
      <div class="view"> <span class="label" contenteditable="true">文字标签</span> </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="active"><a href="#" rel="">默认</a></li>
        <li class=""><a href="#" rel="badge-success">成功</a></li>
        <li class=""><a href="#" rel="badge-warning">警告</a></li>
        <li class=""><a href="#" rel="badge-important">重要</a></li>
        <li class=""><a href="#" rel="badge-info">提示</a></li>
        <li class=""><a href="#" rel="badge-inverse">倒数</a></li>
      </ul>
      </span> </span>
      <div class="preview">微标</div>
      <div class="view"> <span class="badge" contenteditable="true">1</span> </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a class="btn btn-mini" href="#" rel="well">嵌入</a> </span>
      <div class="preview">概述</div>
      <div class="view">
        <div class="hero-unit" contenteditable="true">
          <h1>Hello, world!</h1>
          <p>这是一个可视化布局模板, 你可以点击模板里的文字进行修改, 也可以通过点击弹出的编辑框进行富文本修改. 拖动区块能实现排序. </p>
          <p><a class="btn btn-primary btn-large" href="#">参看更多 »</a></p>
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
      <div class="preview">页标题</div>
      <div class="view">
        <div class="page-header" contenteditable="true">
          <h1>页标题范例 <small>此处编写页标题</small></h1>
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
      <div class="preview">文本</div>
      <div class="view">
        <h2 contenteditable="true">标题</h2>
        <p contenteditable="true">本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.</p>
        <p><a class="btn" href="#" contenteditable="true">查看更多 »</a></p>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
      <div class="preview">预览列表</div>
      <div class="view">
        <ul class="thumbnails">
          <li class="span4">
            <div class="thumbnail"> <img alt="300x200" src="../resources/img/people.jpg">
              <div class="caption" contenteditable="true">
                <h3>冯诺尔曼结构</h3>
                <p>也称普林斯顿结构，是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置。</p>
                <p><a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a></p>
              </div>
            </div>
          </li>
          <li class="span4">
            <div class="thumbnail"> <img alt="300x200" src="../resources/img/city.jpg">
              <div class="caption" contenteditable="true">
                <h3>哈佛结构</h3>
                <p>哈佛结构是一种将程序指令存储和数据存储分开的存储器结构，它的主要特点是将程序和数据存储在不同的存储空间中，进行独立编址。</p>
                <p><a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a></p>
              </div>
            </div>
          </li>
          <li class="span4">
            <div class="thumbnail"> <img alt="300x200" src="../resources/img/sports.jpg">
              <div class="caption" contenteditable="true">
                <h3>改进型哈佛结构</h3>
                <p>改进型的哈佛结构具有一条独立的地址总线和一条独立的数据总线，两条总线由程序存储器和数据存储器分时复用，使结构更紧凑。</p>
                <p><a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a></p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="active"><a href="#" rel="">默认</a></li>
        <li class=""><a href="#" rel="progress-info">提示</a></li>
        <li class=""><a href="#" rel="progress-success">成功</a></li>
        <li class=""><a href="#" rel="progress-warning">警告</a></li>
        <li class=""><a href="#" rel="progress-danger">危险</a></li>
      </ul>
      </span> <a class="btn btn-mini" href="#" rel="progress-striped">条纹</a> <a class="btn btn-mini" href="#" rel="active">动画</a> </span>
      <div class="preview">进度条</div>
      <div class="view">
        <div class="progress">
          <div class="bar" style="width: 60%;"></div>
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a class="btn btn-mini" href="#" rel="well">嵌入</a> </span>
      <div class="preview">嵌入媒体</div>
      <div class="view">
        <div class="media"> <a href="#" class="pull-left"> <img src="../resources/img/a_002.jpg" class="media-object"> </a>
          <div class="media-body" contenteditable="true">
            <h4 class="media-heading">嵌入媒体标题</h4>
           请尽量使用HTML5兼容的视频格式和视频代码实现视频播放, 以达到更好的体验效果. </div>
        </div>
      </div>
    </div>
  </li>
</ul>

<!-- ------------------------------------- 交互组件 ------------------------------------- -->
<ul class="nav nav-list accordion-group">
  <li class="nav-header"><i class="icon-plus icon-white"></i> 交互组件 <span class="label label-important">NEW!</span>
    <div class="pull-right popover-info"><i class="icon-question-sign "></i>
      <div class="popover fade right">
        <div class="arrow"></div>
        <h3 class="popover-title">帮助</h3>
        <div class="popover-content">拖放组件到布局容器. 拖入后, 你可以配置显示样式. 如果有任何疑问可访问 <a target="_blank" href="http://twitter.github.io/bootstrap/javascript.html">JavaScript.</a></div>
      </div>
    </div>
  </li>
  <li style="display: none;" class="boxes mute" id="elmJS">
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <div class="preview">遮罩窗体</div>
      <div class="view"> 
        <!-- Button to trigger modal --> 
        <a id="myModalLink" href="#myModalContainer" role="button" class="btn" data-toggle="modal" contenteditable="true">触发遮罩窗体</a> 
        
        <!-- Modal -->
        <div id="myModalContainer" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel" contenteditable="true">标题栏</h3>
          </div>
          <div class="modal-body">
            <p contenteditable="true">显示信息</p>
          </div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true" contenteditable="true">关闭</button>
            <button class="btn btn-primary" contenteditable="true">保存设置</button>
          </div>
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a class="btn btn-mini" href="#" rel="navbar-inverse">Inverse</a> 
      <!--a class="btn btn-mini" href="#" rel="navbar-fixed-top">Navbar fixed top</a--> 
      </span>
      <div class="preview">导航栏</div>
      <div class="view">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container-fluid"> <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand" contenteditable="true">网站名</a>
              <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav" contenteditable="true">
                  <li class="active"><a href="#">主页</a></li>
                  <li><a href="#">链接</a></li>
                  <li><a href="#">链接</a></li>
                  <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">下拉导航1</a></li>
                      <li><a href="#">下拉导航2</a></li>
                      <li><a href="#">其他</a></li>
                      <li class="divider"></li>
                      <li class="nav-header">标签</li>
                      <li><a href="#">链接1</a></li>
                      <li><a href="#">链接2</a></li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav pull-right" contenteditable="true">
                  <li><a href="#">右边链接</a></li>
                  <li class="divider-vertical"></li>
                  <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">下拉导航1</a></li>
                      <li><a href="#">下拉导航2</a></li>
                      <li><a href="#">其他</a></li>
                      <li class="divider"></li>
                      <li><a href="#">链接3</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <!-- /.nav-collapse --> 
            </div>
          </div>
          <!-- /navbar-inner --> 
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">位置 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="active"><a href="#" rel="">默认</a></li>
        <li class=""><a href="#" rel="tabs-below">底部</a></li>
        <li class=""><a href="#" rel="tabs-left">靠左</a></li>
        <li class=""><a href="#" rel="tabs-right">靠右</a></li>
      </ul>
      </span> </span>
      <div class="preview">切换卡</div>
      <div class="view">
        <div class="tabbable" id="myTabs"> <!-- Only required for left/right tabs -->
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab" contenteditable="true">第一部分</a></li>
            <li><a href="#tab2" data-toggle="tab" contenteditable="true">第二部分</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab1" contenteditable="true">
              <p>第一部分内容.</p>
            </div>
            <div class="tab-pane" id="tab2" contenteditable="true">
              <p>第二部分内容.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="active"><a href="#" rel="">默认</a></li>
        <li class=""><a href="#" rel="alert-info">提示</a></li>
        <li class=""><a href="#" rel="alert-error">错误</a></li>
        <li class=""><a href="#" rel="alert-success">成功</a></li>
      </ul>
      </span> </span>
      <div class="preview">提示框</div>
      <div class="view">
        <div class="alert" contenteditable="true">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <h4>提示!</h4>
          <strong>警告!</strong> 请注意你的个人隐私安全. </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
      <div class="preview">手风琴切换</div>
      <div class="view">
        <div class="accordion" id="myAccordion">
          <div class="accordion-group">
            <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne" contenteditable="true"> 选项卡 #1 </a> </div>
            <div id="collapseOne" class="accordion-body collapse in">
              <div class="accordion-inner" contenteditable="true"> 功能块... </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo" contenteditable="true"> 选项卡 #2 </a> </div>
            <div id="collapseTwo" class="accordion-body collapse">
              <div class="accordion-inner" contenteditable="true"> 功能块... </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
      <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
      <div class="preview">轮换图</div>
      <div class="view">
        <div class="carousel slide" id="myCarousel">
          <ol class="carousel-indicators">
            <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
            <li data-slide-to="1" data-target="#myCarousel" class=""></li>
            <li data-slide-to="2" data-target="#myCarousel" class=""></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active"> <img alt="" src="../resources/img/1.jpg">
              <div class="carousel-caption" contenteditable="true">
                <h4>棒球</h4>
                <p>棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。</p>
              </div>
            </div>
            <div class="item"> <img alt="" src="../resources/img/2.jpg">
              <div class="carousel-caption" contenteditable="true">
                <h4>冲浪</h4>
                <p>冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。</p>
              </div>
            </div>
            <div class="item"> <img alt="" src="../resources/img/3.jpg">
              <div class="carousel-caption" contenteditable="true">
                <h4>自行车</h4>
                <p>以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。</p>
              </div>
            </div>
          </div>
          <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a> <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a> </div>
      </div>
    </div>
  </li>
</ul>
<ul class="nav nav-list accordion-group">
  <li class="nav-header"><i class="icon-plus icon-white"></i> 应用扩展 </li>
  <li style="display: none;" class="boxes mute" id="elmComm">
    <div class="preview">建设中...</div>
  </li>
</ul>